<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    /*
    一、Vue组件间通信有哪些方式

    1、通过共同祖辈“$parent”或者“$root”进行通信
    2、父组件通过设置子组件ref来进行通信
    3、兄弟组件通过“$emit”触发自定义事件，“$emit”第二个参数为传递的数字，另一个兄弟组件通过“$on”监听自定义事件

    二、组件间通信的分类

    1、父子组件之间的通信
    2、兄弟组件之间的通信
    3、祖孙与后代组件之间的通信
    4、非关系组件之间的通信

    三、组件间通信的方案
    
    1、通过props传递
    2、通过$emit触发自定义事件
    3、使用ref
    4、EventBus
    5、parent或者root
    6、attr或者listeners
    7、Provide与inject
    8、Vuex


    四、props传递数据
    适用场景  父组件传递数据给子组件
    子组件设置props属性定义接收父组件传递过来的参数
    父组件在使用子组件标签中通过字面量来传递值
    
    children.vue
    props；{
        //字符串形式
        name：String   //接收的类型参数
        // 对象形式
        age：{
            type：Number， //接受的类型为数值
            default：18    //默认值为18
            require：true  //age属性必须传递
        }
    }
    Father.vue组件
    <Children name:"jack" age=18/>


    五、$emit触发自定义事件
    适用场景：子组件传递数给父组件
    子组件通过$emit触发自定义事件，$emit第二个参数为传递的数值
    父组件绑定监听器获取到子组件传递过来的参数
    Children.vue
    this.$emit('add',good)

    Father.vue
    <Chilren @add="cartAdd($event)">


    六、ref
    父组件在使用子组件的时候设置ref
    父组件通过设置子组件ref来获取数据
    父组件
    <Children ref="foo"/>
    this.$refs.foo     //获取子组件实例，通过子组件实例我们就能拿到对应的数据

    七、EventBus
    使用场景：兄弟组件传值
    创建一个中央时间总线EventBus
    兄弟组件通过$emit触发自定义事件，$emit第二个采纳数为传递的数值
    另一个兄弟组件通过$on监听自定义事件
    Bus.js
    //创建一个中央时间总线
    class bus{
        constructor(){
            this.callbacks = {};    //存放事件的名字
        }
        $on(name ,fn){
            this.callbacks[name] = this.callback[name] || [];
            this.callbacks[name] = push(fn);
        }
        $emit(name,args){
            if(this.callbacks[name]){
                this.callback[name].forEach((cb) => cb(args));
            }
        }
    }
    // main.js
    Vue.prototype.$bus = new Bus()    //将bus挂载到vue实例的原型上
    // 另一种方式
    Vue。prototype.$bus = new Vue()   //Vue已经实现了bus功能
    children1.vue
    this.$bus.$emit('foo')
    Children2.vue
    this.$bus.$on('foo',this,handle)
    */ 
</script>
</html>